<template>
  <div class="div_middle_session">
    <CScrollbar class="div_crollbar" width="288px"
                height="780px">
      <ul class="middle_session_ul">
        <!--                    :class="[user.uid === this.$store.state.chartStatus.nowChartUid ? 'showChart' : 'shutDownChart']"
        -->
        <li v-for="(user,idx) in this.$store.state.chartStatus.nowSessions" :key="user" class="middle_session_ul_li"
            @contextmenu.prevent="openMenu($event,user,idx)"
            :class="[user.have_no_read_message === 1 ? 'haveNoReadMessage' : user.uid === this.$store.state.chartStatus.nowChartUid?
                 'showChart' : 'shutDownChart' ]"
            @click="showChart(user,idx)">
          <div class="div_middle_session_li_photo">
            <img class="div_middle_session_li_photo_img"
                 :class="[user.is_online === '0' ? 'img_change_to_gray' : 'div_middle_session_li_photo_img']"
                 :src="user.user_img_url"
                 alt="">
          </div>
          <div class="div_middle_session_li_title ">
            <div class="div_middle_session_title_name">
              {{ user.user_name }}
            </div>
            <div class="div_middle_session_title_record text_overflow">
              {{ user.last_message }}
            </div>
          </div>
        </li>
      </ul>
    </CScrollbar>
  </div>
  <div>
    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
      <li @click="handleTop">设为置顶</li>
      <li @click="handleDelete">从会话列表中移除</li>
      <li @click="handleDownloadFile">查看资料</li>
    </ul>
  </div>
</template>

<script>

import {CScrollbar} from "c-scrollbar"

export default {
  name: "middle_session",
  components: {CScrollbar},
  data() {
    return {
      visible: false,
      top: 0,
      left: 0,
      count: 15,
      rightClickItem: 99,
      nowSessionIdx: 0,
      user: "",
    }
  },

  methods: {
    // 聊天.
    showChart(session, idx) {
      console.log(session)
      // session 当前选中的session
      // idx 当前选中session的数组下标.
      if (this.$store.state.chartStatus.nowSessions.length <= 0) {
        this.$store.state.rightTitle = ""
      } else {
        this.$store.state.rightTitle = session.user_name
        // TODO:  修改可以直接修改.
        this.$store.state.rightSignature = session.signature
      }
      // 还需要确定当前是群聊还是单聊的页面.

      // GroupSession是5.
      // TODO: 理论上这里是根据s_type来进行选择的,但是目前为了测试,就弄车这样.
      // this.$store.state.leftStatus.mainMenuStatu = this.$store.state.leftStatus.mainWinPageStatus.GroupSession
      // 只要点击该session就说明已经看了.
      this.$store.state.chartStatus.nowSessions[idx].have_no_read_message = 0
      this.$store.commit('setNowSessionInfos', session)
      this.$store.commit('ChangeNowChartNumber', idx)
      // 还需要.
    },
    openMenu(e, user, idx) {
      this.user = user
      // setNowSessionToTop
      // 只需要吧idx设置第一个即可,顺便删除掉当前位置.
      this.nowSessionIdx = idx
      let x = e.pageX
      let y = e.pageY
      // 设定右键菜单的边框距离.
      this.top = y
      this.left = x
      this.visible = true
    },
    closeMenu() {
      this.visible = false
    },
    handleTop() {
      // this.$store.commit('setNowSessionToTop', this.nowSessionIdx)
    },
    handleDelete(){
    },
  },

  // 监听鼠标.
  watch: {
    visible() {
      if (this.visible) {
        document.body.addEventListener('click', this.closeMenu)
      } else {
        document.body.removeEventListener('click', this.closeMenu)
      }
    }
  },

  mounted() {
  }
}
</script>

<style scoped>

.div_crollbar {
  width: 250px;
  position: absolute;
}

.div_middle_session {
  /*width: 100px;*/
  margin-top: 5px;
}

.middle_session_ul {
  list-style: none;
  margin-left: -40px;
  margin-top: 0px;
}

.middle_session_ul_li {
  width: 100%;
  height: 67px;
}

.div_middle_session_li_photo {
  display: inline-block;
  height: 100%;
  width: 60px;
  vertical-align: top;
}

.div_middle_session_li_title {
  display: inline-block;
  position: relative;
  vertical-align: top;
  margin-top: 15px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.div_middle_session_li_photo_img {
  border-radius: 6px;
  position: relative;
  margin-top: 13px;
  margin-left: 14px;
  width: 42px;
  height: 42px;
}

.div_middle_session_title_name {
  font-weight: 600;
  font-size: 15px;
}

.div_middle_session_title_record {
  font-weight: 200;
  font-size: 13px;
  width: 200px;
}

.text_overflow {
  display: block;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*235, 235, 235*/
.showChart {
  background-color: #ebebeb;
}

.shutDownChart {
  /*background-color: #f7ba2a;*/
}

.haveNoReadMessage {
  background-color: #ffd8a8;
}

/*-------------------------*/
.contextmenu {
  margin: 0;
  background: #fff;
  z-index: 3000;
  position: absolute;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 16px 2px rgba(0, 0, 0, 0.3);
}

.contextmenu li {
  margin: 0;
  padding: 7px 16px;
}

.contextmenu li:hover {
  background: #eee;
  cursor: default;
}

.middle_session_ul li:hover {
  cursor: default;
  background-color: #ebebeb;
}

.img_change_to_gray {

  /*-webkit-filter: grayscale(100%);*/
  /*-moz-filter: grayscale(100%);*/
  /*-ms-filter: grayscale(100%);*/
  /*-o-filter: grayscale(100%);*/
  /*filter: grayscale(100%);*/

  /*filter: gray;*/
  -webkit-filter: grayscale(100%);

}
</style>